import { StyleSheet, Text, View, ScrollView, Image, ImageBackground, Pressable } from 'react-native';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigation } from '@react-navigation/native';
import Icon from 'react-native-vector-icons/Ionicons';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import LinearGradient from 'react-native-linear-gradient';
import { appStore, observer, userStore } from '~/store';
import { FocusAwareStatusBar } from '~/components';
import { isIos, px2dp, scale } from '~/utils/px2dp';
import i18n from '~/i18n/languages';

export default observer(() => {
    const navigation: any = useNavigation();
    const { t } = useTranslation();
    const insets = useSafeAreaInsets();
    const { avatar, armarium_science_user_name } = userStore.me;
    const switchLanguage = () => {
        const language = i18n.language === 'zh' ? 'en' : 'zh';
        appStore.switchLanguage(language);
    };
    const goDeviceList = () => {
        navigation.navigate('BindDeviceList');
    };
    const singOut = () => {
        userStore.signOut();
        navigation.navigate('Introduction');
    };
    return (
        <View style={styles.container}>
            <FocusAwareStatusBar translucent={true} barStyle={'light-content'} />
            <ImageBackground
                style={[styles.bg, { paddingTop: isIos() ? insets.top : insets.top + px2dp(32) }]}
                source={require('~/assets/login/bg4.png')}>
                <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.contentStyle}>
                    <Pressable disabled onPress={() => navigation.navigate('EditUserInfo')}>
                        <Image
                            source={{
                                uri: avatar
                                    ? avatar
                                    : 'https://bjy-crmeb.oss-cn-shenzhen.aliyuncs.com/attach/2025/04/cf535202504141423579075.png',
                            }}
                            style={styles.avatar}
                        />
                        <Text style={styles.userName}>{armarium_science_user_name}</Text>
                    </Pressable>
                    <View style={styles.content}>
                        <Text style={styles.title}>{t('MyScreen.t1')}</Text>
                        <LinearGradient
                            pointerEvents="box-none"
                            style={[styles.card]}
                            colors={['#7CA59B', '#BEC8AF', '#9DABAF', '#C2A897', '#DCBABA']}
                            start={{ x: 0, y: 0 }}
                            end={{ x: 1, y: 0 }}>
                            <Pressable onPress={() => navigation.navigate('BuyMall')} style={styles.row}>
                                <Image style={styles.icons} source={require('~/assets/user/gift.png')} />
                                <Text style={styles.t1}>{t('MyScreen.t2')}</Text>
                            </Pressable>
                        </LinearGradient>
                        <View style={styles.listContent}>
                            <Text style={styles.title}>{t('MyScreen.t3')}</Text>
                            <Pressable style={[styles.list, styles.row, styles.between]} onPress={goDeviceList}>
                                <Text style={styles.t2}>{t('MyScreen.t4')}</Text>
                                <Icon name="chevron-forward-outline" size={px2dp(40)} color={'#a4a4a4'}></Icon>
                            </Pressable>
                            {userStore.me.email !== '1552875484@qq.com' && (
                                <Pressable
                                    style={[styles.list, styles.row, styles.between]}
                                    onPress={() => {
                                        userStore.selectRole('Acupoints');
                                        navigation.navigate('AcupointsScreen');
                                    }}>
                                    <Text style={styles.t2}>{t('MyScreen.t10')}</Text>
                                    <Icon name="chevron-forward-outline" size={px2dp(40)} color={'#a4a4a4'}></Icon>
                                </Pressable>
                            )}
                            {userStore.me.email !== '1552875484@qq.com' && (
                                <Pressable
                                    style={[styles.list, styles.row, styles.between]}
                                    onPress={() => {
                                        userStore.selectRole('Doctor');
                                        navigation.navigate('DoctorScreen');
                                    }}>
                                    <Text style={styles.t2}>{t('MyScreen.t11')}</Text>
                                    <Icon name="chevron-forward-outline" size={px2dp(40)} color={'#a4a4a4'}></Icon>
                                </Pressable>
                            )}
                            <Pressable style={[styles.list, styles.row, styles.between]} onPress={switchLanguage}>
                                <Text style={styles.t2}>{t('MyScreen.t5')}</Text>
                                <View style={styles.row}>
                                    <Text style={styles.t2}>{appStore.app.language == 'zh' ? '中文简体' : 'EN'}</Text>
                                    <Icon name="chevron-forward-outline" size={px2dp(40)} color={'#a4a4a4'}></Icon>
                                </View>
                            </Pressable>
                            <Pressable
                                style={[styles.list, styles.row, styles.between]}
                                onPress={() => navigation.navigate('AboutUs')}>
                                <Text style={styles.t2}>{t('MyScreen.t6')}</Text>
                                <Icon name="chevron-forward-outline" size={px2dp(40)} color={'#a4a4a4'}></Icon>
                            </Pressable>
                            <Pressable
                                style={[styles.list, styles.row, styles.between]}
                                onPress={() => navigation.navigate('PrivacyScreen')}>
                                <Text style={styles.t2}>{t('MyScreen.t7')}</Text>
                                <Icon name="chevron-forward-outline" size={px2dp(40)} color={'#a4a4a4'}></Icon>
                            </Pressable>
                            <Pressable
                                style={[styles.list, styles.row, styles.between]}
                                onPress={() => navigation.navigate('DestroyAccount')}>
                                <Text style={styles.t2}>{t('MyScreen.t8')}</Text>
                                <Icon name="chevron-forward-outline" size={px2dp(40)} color={'#a4a4a4'}></Icon>
                            </Pressable>
                            <Pressable style={[styles.list, styles.row, styles.between]} onPress={singOut}>
                                <Text style={[styles.t2, { color: 'red' }]}>{t('MyScreen.t9')}</Text>
                                <Icon name="chevron-forward-outline" size={px2dp(40)} color={'#a4a4a4'}></Icon>
                            </Pressable>
                        </View>
                    </View>
                </ScrollView>
            </ImageBackground>
        </View>
    );
});

const styles = StyleSheet.create({
    row: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    center: {
        justifyContent: 'center',
    },
    between: {
        justifyContent: 'space-between',
    },
    container: {
        flex: 1,
    },
    contentStyle: {
        flexGrow: 1,
        paddingBottom: '30%',
    },
    bg: {
        flex: 1,
        resizeMode: 'contain',
        paddingHorizontal: px2dp(24),
        position: 'relative',
    },
    avatar: {
        width: px2dp(120),
        height: px2dp(120),
        borderRadius: px2dp(60),
        alignSelf: 'center',
    },
    userName: {
        color: '#fff',
        fontSize: scale(36),
        fontWeight: 'bold',
        textAlign: 'center',
        marginTop: px2dp(12),
    },
    content: {
        marginTop: '16%',
    },
    icons: {
        width: px2dp(48),
        height: px2dp(48),
    },
    card: {
        padding: px2dp(24),
        borderRadius: px2dp(24),
    },
    title: {
        color: '#D4D4D4',
        fontSize: scale(30),
        fontWeight: 'bold',
        marginBottom: px2dp(24),
    },
    t1: {
        color: '#111111',
        marginLeft: px2dp(12),
        fontSize: scale(26),
    },
    listContent: {
        marginTop: '10%',
    },
    list: {
        padding: px2dp(24),
        backgroundColor: 'rgba(255, 255, 255, 0.08)',
        borderRadius: px2dp(24),
        marginBottom: px2dp(24),
    },
    t2: {
        color: '#D4D4D4',
        fontSize: scale(28),
        fontWeight: 'bold',
        // marginLeft: px2dp(16),
    },
    icons1: {
        width: px2dp(72),
        height: px2dp(72),
        borderRadius: px2dp(72),
    },
});
